import { addImageList } from "./newsImageList";

export const addImageTitle = (editor) => {
  const optsTitle = {
    id: "image-title",
    label: "Image Title",
    classPrefix: "image-title",
    // 直接在这里定义您想要的基础样式和额外的样式
    style: `
      .image-title {
        padding: 0;
        margin: 0;
        list-style-type: none; /* 移除列表样式 */
        width: 100%;
        display: flex;
      }

      .image-title-container {
        padding-left: 0;
        margin: 0 auto;
        width: 96%;
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
      }

      .image-title-container img {
        object-fit: cover;
        margin-right: 20px;
      }

      .image-title-text-container {
        width: 80%;
        list-style-type: none;
        padding-left: 0;
        margin: 0;
      }

      .image-title-text-container li {
        border-bottom: none;
        padding: 2px;
        margin-bottom: 5px;
      }
    `,
    styleAdditional: `
      .image-title-text-container li a{
        display: block; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    `,
  };

  editor.otherNewsData = optsTitle;
  addImageList(editor);
  editor.BlockManager.add("image-title", {
    label: "图标题文(超出省略)",
    category: "新闻类",
    media:`<svg t="1720769816007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41412" width="30" height="30"><path d="M665.6 153.6h307.2a51.2 51.2 0 0 0 0-102.4h-307.2a51.2 51.2 0 0 0 0 102.4zM972.8 256h-307.2a51.2 51.2 0 0 0 0 102.4h307.2a51.2 51.2 0 0 0 0-102.4zM972.8 460.8h-307.2a51.2 51.2 0 0 0 0 102.4h307.2a51.2 51.2 0 0 0 0-102.4zM972.8 665.6H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4zM972.8 870.4H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4z" p-id="41413"></path><path d="M51.2 51.2m51.2 0l358.4 0q51.2 0 51.2 51.2l0 409.6q0 51.2-51.2 51.2l-358.4 0q-51.2 0-51.2-51.2l0-409.6q0-51.2 51.2-51.2Z" p-id="41414"></path></svg>`,
    select: true,
    content: { type: "image-title" },
  });
};
